<template>
	<view class="index">
		<view class="chunk" :style="{height: chunkHeight + 'px' }"></view>
		<view class="head" id="head" :class="{active:headActive}">
			<view class="title" :style="{height: titleHeight + 'px',paddingBottom: paddingBottom + 'px' }">
				<view class="title-text">挺想租|租好物分享新生活</view>
			</view>
			<view class="search-box" v-if="hiddenFlag">
				<view class="conetnt" @click="handleToSearch">
					<uni-icons type="search" size="18" color="#00000033"></uni-icons>
					<swiper class="hot" circular :vertical="true" :interval="3500" :autoplay="true">
						<swiper-item v-for="(item,index) in hotSearch" :key="index">
							{{item}}
						</swiper-item>
					</swiper>
				</view>
				<view class="city" @click="handleToCity">
					<text class="name">{{city}}</text>
					<image v-show="!headActive" :lazy-load="true" class="down" src="@/static/index/chevron-down.png"></image>
					<image v-show="headActive" :lazy-load="true" class="up" src="@/static/index/chevron-right.png"></image>
				</view>
			</view>
		</view>
		<view class="classify">
			<view class="item" v-for="(item,index) in classify" :key="index" @click="handleGoClassify(item)">
				<image class="img" :lazy-load="true" :src="getImg(item.img)"></image>
				<text class="title">{{item.title}}</text>
			</view>
		</view>
		<view class="main">
			<view class="banner" v-if="banner.length">
				<swiper circular :interval="5500" :autoplay="true">
					<swiper-item class="img" v-for="(item,index) in banner" :key="index" @click="handleBanner(item)">
						<image class="img" :lazy-load="true" :src="getImg(item.img)"></image>
					</swiper-item>
				</swiper>
			</view>
			<zoneCard v-if="appleData" :data="appleData" :type="1"></zoneCard>
			<zoneCard v-if="hotSale" :data="hotSale" :type="2"></zoneCard>
			<zoneCard v-if="towCol" :data="towCol" :type="3"></zoneCard>
			<zoneCard v-if="computer" :data="computer" :type="4"></zoneCard>
			<view class="special-sale" v-if="specialSale">
				<topHead :data="specialSale.headData"></topHead>
				<view class="card-model">
					<swiper class="left-card" circular :interval="3500" :autoplay="true">
						<swiper-item class="img" v-for="(item,index) in specialSale.leftData" :key="index"
							@click="handleSpecial(item)">
							<image :lazy-load="true" class="img" :src="getImg(item.img)"></image>
						</swiper-item>
					</swiper>
					<view class="right-card">
						<image class="top-card" v-if="specialSale.rightTopData" :src="getImg(specialSale.rightTopData.img)"
							:lazy-load="true" @click="handleSpecial(specialSale.rightTopData)">
						</image>
						<image class=" bottom-card" v-if="specialSale.rightBottomData"
							:src="getImg(specialSale.rightBottomData.img)" :lazy-load="true"
							@click="handleSpecial(specialSale.rightBottomData)"></image>
					</view>
				</view>
			</view>
			<dataList ref="dataList" :title-height="titleHeight" @handleSearchBox="handleSearchBox"></dataList>
		</view>
	</view>
</template>
<script>
	import zoneCard from "@/components/index/zoneCard";
	import topHead from "@/components/index/topHead";
	import dataList from "@/components/index/dataList"
	import {
		getSchemeUrl
	} from '@/api/order.js'
	export default {
		name: "index",
		components: {
			zoneCard,
			topHead,
			dataList
		},
		data() {
			return {
				city: "全国",
				menuInfo: {},
				titleHeight: 0,
				chunkHeight: 0,
				paddingBottom: 0,
				searchBoxHeight: 0,
				headActive: false,
				hiddenFlag: true,
				hotSearch: "", //[]
				classify: "",//[]
				banner: "",//[]
				appleData: "",//{}
				hotSale: "",//{}
				towCol: "",//{}
				computer: "",//{}
				specialSale: "",//{}
			}
		},
		onShow() {
			this.city = getApp().globalData.city;
		},
		onLoad() {
			this.getMenuData();
			this.getIndexData();
			getSchemeUrl().then(res => {
			})
			getApp().globalData.scene = wx.getLaunchOptionsSync().scene
		},
		onReady() {
			this.getSearchBoxInfo();
			this.getPaddingBottom();
		},
		methods: {
			handleSpecial(item) {
				uni.navigateTo({
					url: `/pagesA/category/goods/productDetails/productDetails?id=${ item.jumpUrl }`
				})
			},
			handleBanner(item) {
				const dataType = item.jumpUrl.split("=");
				let url = dataType.length > 1 ?
					`/pagesA/category/goods/goodsList/goodsList?id=${dataType[1]}` :
					"/pagesA/business/business";
				uni.navigateTo({
					url,
				})
			},
			handleGoClassify(item) {
				uni.reLaunch({
					url: `/pages/category/category?jumpUrl=${ item.jumpUrl }`
				})
			},
			setKeyNameData(keyName, params) {
				this[keyName] = params;
			},
			getImg(url) {
				return getApp().globalData.baseImg + url;
			},
			getIndexData() {
				uni.$http.get('/Wechat/Index/index').then(res => {
					const allData = res.data.data.data || [];
					allData.forEach(item=>{
						let params = item.params ? JSON.parse(item.params) : ""
						const type = item.type
						switch (type){
							case 1:
								this.setKeyNameData("hotSearch", params);
								break;
							case 2:
								this.setKeyNameData("classify", params);
								break;
							case 3:
								this.setKeyNameData("banner", params);
								break;
							case 4:
								this.setKeyNameData("appleData", params);
								break;
							case 5:
								this.setKeyNameData("hotSale", params);
								break;
							case 6:
								this.setKeyNameData("towCol", params);
								break;
							case 7:
								this.setKeyNameData("computer", params);
								break;
							case 8:
								this.setKeyNameData("specialSale", params);
								break;
							default:
								break;
						}
					})
					console.log('-----', this.specialSale, this.towCol)
					// this.setKeyNameData("hotSearch", JSON.parse(allData[0].params));
					// this.setKeyNameData("classify", JSON.parse(allData[1].params));
					// this.setKeyNameData("banner", JSON.parse(allData[2].params));
					// this.setKeyNameData("appleData", JSON.parse(allData[3].params));
					// this.setKeyNameData("hotSale", JSON.parse(allData[4].params));
					// this.setKeyNameData("towCol", JSON.parse(allData[5].params));
					// this.setKeyNameData("computer", JSON.parse(allData[6].params));
					// this.setKeyNameData("specialSale", JSON.parse(allData[7].params));
				})
			},
			getPaddingBottom() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.title-text').boundingClientRect(data => {
					this.paddingBottom = (this.menuInfo.height - data.height) / 2;
				}).exec();
			},
			getSearchBoxInfo() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.search-box').boundingClientRect(data => {
					this.searchBoxHeight = data.height;
					this.chunkHeight += data.height;
				}).exec();
			},
			getMenuData() {
				const menuInfo = uni.getMenuButtonBoundingClientRect();
				this.menuInfo = menuInfo;
				this.titleHeight = menuInfo.height + menuInfo.top;
				this.chunkHeight += this.titleHeight;
			},
			handleToCity() {
				uni.navigateTo({
					url: '/pagesB/index/city'
				})
			},
			handleSearchBox(bool) {
				this.hiddenFlag = bool;
			},
			handleToSearch() {
				uni.navigateTo({
					url: '/pagesB/search/search'
				})
			},
		},
		onReachBottom() {
			this.$refs.dataList.getData();
		},
		onPageScroll(event) {
			this.headActive = event.scrollTop > 30 ? true : false;
		},
		onShareTimeline() {
			return {
				title: '挺想租 | 租好物分享新生活',
				path: this.$mp.page.route
			};
		},
	}
</script>
<style lang="scss" scoped>
	.index {
		background-color: white;

		.chunk {
			transition: all .7s;
			background: linear-gradient(45deg, #FF0300 0%, #FA7A79 65%, #FFA9A8 100%);
		}

		.head {
			position: fixed;
			top: 0;
			overflow: hidden;
			width: 100vw;
			z-index: 1000;
			box-sizing: border-box;

			&.active {
				.title {
					color: black;
					background-color: white;
				}

				.search-box {
					background-color: #fff;
					box-shadow: 0 2rpx 6rpx #cfcfcf;
					.conetnt {
						color: black;
						background-color: rgba(47,47,47,0.1);
					}
					.city{
						color: black;
					}
					.up{
						width: 12rpx;
						height: 16rpx;
						margin-left: 26rpx;
						transform: rotate(90deg);
					}
				}
			}

			.title {
				padding: 0 24rpx;
				box-sizing: border-box;
				transition: color .5s;
				display: flex;
				align-items: flex-end;
				color: white;

				.title-text {
					line-height: 1;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.search-box {
				padding: 20rpx 24rpx 18rpx;
				display: flex;
				align-items: center;

				.conetnt {
					display: flex;
					background-color: #FFFFFF;
					height: 60rpx;
					width: 578rpx;
					color: #00000033;
					align-items: center;
					border-radius: 46rpx;
					padding: 0 28rpx;
					box-sizing: border-box;

					.hot {
						margin-left: 12rpx;
						width: 250rpx;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 28rpx;
					}
				}

				.city {
					margin-left: 14rpx;
					color: white;
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.name {
						white-space: nowrap;
						max-width: 100rpx;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.down {
						width: 32rpx;
						height: 32rpx;
						margin-left: 12rpx;
					}
				}
			}
		}

		.classify {
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			background-color: white;
			padding: 32rpx 0;

			.item {
				width: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				&:nth-of-type(n + 6) {
					margin-top: 58rpx;
				}

				.img {
					width: 84rpx;
					height: 84rpx;
				}

				.title {
					font-size: 24rpx;
					overflow: hidden;

				}
			}
		}

		.main {
			padding: 0 24rpx;

			.banner {
				width: 702rpx;
				height: 176rpx;
				border-radius: 16rpx;
				text-align: center;
				line-height: 188rpx;
				background-color: #FCF0F0;
				overflow: hidden;

				.img {
					width: 702rpx;
					height: 176rpx;
				}
			}

			.special-sale {
				margin-top: 30rpx;
				padding: 24rpx;
				box-sizing: border-box;
				background: linear-gradient(180deg, #FFFFFF 0%, #FFF9F9 100%);
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(116, 116, 116, 0.1);
				border-radius: 16rpx;
				overflow: hidden;

				.card-model {
					display: flex;

					.left-card {
						width: 316rpx;
						height: 378rpx;
						border-radius: 16rpx;
						box-sizing: border-box;
						background-color: #F5F3FF;
						margin-right: 24rpx;

						.img {
							width: 316rpx;
							height: 378rpx;
						}
					}

					.right-card {
						width: 314rpx;
						height: 380rpx;

						.top-card {
							bottom: 24rpx;
							width: 314rpx;
							height: 178rpx;
							margin-bottom: 24rpx;
							border-radius: 16rpx;
						}

						.bottom-card {
							bottom: 24rpx;
							height: 178rpx;
							border-radius: 16rpx;
							width: 314rpx;
						}
					}
				}
			}
		}
	}
</style>